<template>
    <div>
        <div class="recommend-title">周末去哪呢？</div>
        <ul>
            <li
            class="item border-bottom"
            v-for="item of recommendList"
            :key="item.id"
            >
                <div class="item-img-wrapper">
                    <img :src="item.imageUrl" alt="推荐图片" class="item-img">
                </div>
                <div class="item-info">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-desc">{{ item.desc }}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'HomeWeekend',
    data () {
        return{
            recommendList: [{
                id: '001',
                imageUrl: 'static/images/weekend.webp',
                title: '梁星琪',
                desc: '爱好：一堆东西，购物、逛街、上网、游游泳、读书、看电视剧。'
            },
            {
                id: '002',
                imageUrl: 'static/images/weekend.webp',
                title: '梁星琪',
                desc: '爱好：一堆东西，购物、逛街、上网、游游泳、读书、看电视剧。'
            },{
                id: '003',
                imageUrl: 'static/images/weekend.webp',
                title: '梁星琪',
                desc: '爱好：一堆东西，购物、逛街、上网、游游泳、读书、看电视剧。'
            },{
                id: '004',
                imageUrl: 'static/images/weekend.webp',
                title: '梁星琪',
                desc: '爱好：一堆东西，购物、逛街、上网、游游泳、读书、看电视剧。'
            },{
                id: '005',
                imageUrl: 'static/images/weekend.webp',
                title: '梁星琪',
                desc: '爱好：一堆东西，购物、逛街、上网、游游泳、读书、看电视剧。'
            },]
        }
    }
}
</script>
<style scoped lang="stylus">
@import '~styles/mixins.styl'
.recommend-title
    line-height .8rem
    background-color #eee
    text-indent .2rem 
.item-img-wrapper
    overflow hidden
    height 0
    padding-bottom 60%
    .item-img
        width 100%  
.item-info
    padding .1rem
    .item-title
        line-height .54rem
        font-size .32rem
        ellipsis()
    .item-desc
        line-height .4rem
        color #ccc
        ellipsis()
</style>
